<template>
  <div id="app">
    <el-container style="background-color: #409eff" v-if="name != '正在获取'">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        @select="handleSelect"
        :router="true"
        background-color="#409EFF"
        text-color="#fff"
        active-text-color="#ffd04b"
        ><el-menu-item
          ><template>
            <el-avatar
            style="margin-top:-3px"
              class="avatar"
              shape="square"
              size="medium"
              :src="avatar"
            ></el-avatar>
            <img class="logo" src="../src/assets/logo.png" alt="" />
            <span class="systemtitle">东杰智能</span></template
          ></el-menu-item
        >

        <!-- <el-menu-item >人力资源系统群</el-menu-item> -->
      </el-menu>
      <el-container class="userroom" v-if="name != '正在获取'">
        <!-- <el-avatar
            class="avatar"
            shape="square"
            size="small"
            :src="avatar"
          ></el-avatar>

          <h5 class="username">{{ name }}</h5> -->
      </el-container>

      <!-- <el-col :span="2">
        <el-container class="userroom" v-if="name != '正在获取'">
          <el-avatar
            class="avatar"
            shape="square"
            size="small"
            :src="avatar"
          ></el-avatar>

          <h5 class="username">{{ name }}</h5>
        </el-container>
      </el-col> -->
    </el-container>

    <!-- vue-router提供的，表示渲染路由组件的出口 -->
    <router-view></router-view>
  </div>
</template>

<script>
import * as dd from "dingtalk-jsapi";

// 业务逻辑
export default {
  name: "App",
  data() {
    return {
      activeIndex: "/userlist",

      code: "",
      name: "正在获取",
      avatar: "正在获取",
      url: "",
      ceshi: "666",
    };
  },

  async created() {
    this.url = window.location.href;
    // 可打印dd看打印的值
    // console.log('dd', dd);
    if (dd.env.platform !== "notInDingTalk") {
      //进行钉钉登录操作
      // this.$notify({
      //   title: "环境验证正确",
      //   message: "目前为钉钉环境，正在进行身份验证",
      //   type: "success",
      //   duration: 1500,
      // });
      await this.getDDCode();
    } else {
      this.name = "正在获取";
      // this.$notify({
      //   title: "非钉钉环境",
      //   message: "检测目前非钉钉环境，部分功能关闭",
      //   type: "warning",
      //   duration: 3000,
      // });
    }
  },

  methods: {
    handleSelect(key, keyPath) {},

    to(path) {
      this.$router.push(path);
    },

    // 获取钉钉code
    getDDCode() {
      // 打开等待

      const that = this;
      return new Promise((resolve) => {
        dd.ready(function () {
          dd.runtime.permission.requestAuthCode({
            corpId: "ding5b2aa85601c5363fffe93478753d9884", // 企业id
            onSuccess: async function (info) {
              const tempCode = info.code;
              that.code = tempCode;
              try {
                let res = await that.$axios.get(
                  `api/member/ddlogin?code=` + that.code
                );
                that.avatar = res.data.avatar;
                sessionStorage.setItem("name", res.data.name);
                sessionStorage.setItem("userid", res.data.userid);
                sessionStorage.setItem("id", res.data.id);
                sessionStorage.setItem("roleid", res.data.roleid);
                that.name = sessionStorage.getItem("name");

                //  关闭等待
              } catch (e) {}
            },
            onFail: function (err) {
              that.toast({
                message: "获取code失败，请退出重试",
              });
            },
          });
        });
      });
    },
  },
  components: {},
  watch: {
    $route(to, from) {
      if (to.path === "/" || to.path.indexOf("/userlist") !== -1) {
        this.activeIndex = "/userlist";
      } else {
        this.activeIndex = to.path;
      }
    },
  },
};
</script>

<style>
.logo {
  height: 25px;
  margin-top: -5px;
}



.systemtitle {
  font-size: 22px;
  margin-left: 5px;
}

.userroom {
  height: 60px;
  min-width: 100px;
}

.avatar {
  margin-top: 17px;
  margin-right: 5px;
}
.username {
  color: #fff;
}

a {
  text-decoration: none;
}
.el-menu {
  border: 0 !important;
}

#app {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
